<template>
  <div class="container">
    <div>{{ formData }}</div>
    <c-form ref="formRef" :model="formData">
      <c-form-item
        prop="name"
        label="电话"
        :rules="[
          {
            required: true,
            message: '电话号码不能为空',
          },
        ]"
      >
        <c-input v-model="formData.name" type="text" clearable />
      </c-form-item>

      <c-form-item
        prop="email"
        label="邮箱"
        :rules="[
          {
            required: true,
            message: '邮箱号码不能为空',
          },
          {
            type: 'email',
            message: '邮箱格式错误',
          },
        ]"
      >
        <c-input v-model="formData.email" clearable />
      </c-form-item>

      <c-form-item prop="gender" label="性别">
        <c-radio-group v-model="formData.gender">
          <c-radio
            v-for="(item, index) in genderRadioList"
            :key="index"
            :label="item.label"
            :value="item.value"
            >{{ item.label }}</c-radio
          >
        </c-radio-group>
      </c-form-item>

      <c-form-item prop="gender" label="性别">
        <c-select v-model="formData.gender">
          <c-option
            v-for="(item, index) in genderRadioList"
            :key="index"
            :label="item.label"
            :value="item.value"
            >{{ item.label }}</c-option
          >
        </c-select>
      </c-form-item>

      <c-form-item>
        <c-button type="primary" @click="submit">提交</c-button>
        <c-button @click="reset">重置</c-button>
      </c-form-item>
    </c-form>
    <c-button type="primary" @click="handleMessageEvent">消息提示</c-button>
    <c-badge :value="100">
      <c-button type="success" :disabled="disabled" @click="handleEvent"
        >打开弹窗</c-button
      >
    </c-badge>

    <c-dialog v-model="show" action @confirm="handleConfirm">
      <div style="width: 100%; height: 200px">1111111111</div>
    </c-dialog>

    <c-avatar :src="squareUrl" :size="50"></c-avatar>
  </div>
</template>

<script setup lang="ts">
import { CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

import { CMessage, CMessageBox } from '../../packages'
import { CForm } from '@cow-plus/components'

const formRef = ref<InstanceType<typeof CForm>>()

const genderRadioList = ref([
  {
    label: '男',
    value: '0',
  },
  {
    label: '女',
    value: '1',
  },
])
const formData = ref({
  name: '张三',
  email: '',
  gender: '1',
})

const submit = () => {
  formRef.value?.validate({
    success() {
      console.log('success')
    },
    fail({ errors }) {
      console.log(errors)
    },
  })
}
const reset = () => {
  formRef.value?.resetFields()
}

const disabled = ref(false)

const show = ref(false)
const handleEvent = () => {
  show.value = true
}

const handleMessageEvent = () => {
  CMessageBox({
    title: '警告',
    content: '你好世界',
    confirmText: '确定',
    cancelText: '取消',
    type: 'success',
    success() {
      CMessage.success('确认')
    },
    fail() {
      CMessage.error('取消')
    },
  })
}
const handleConfirm = () => {
  console.log('11111111111')
}

const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,
})

const { squareUrl } = toRefs(state)
</script>

<style scoped lang="scss">
.container {
}
</style>
